<template>
  <div>
    <!--  队伍标志大图  -->
    <div>
      <el-row>
        <el-col :span="24">
          <div class="grid-content-banner bg-img">
            <div class="team-bg-content">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content-banner-img bg-purple">
                    <div class="team-bg-content-img-box">
                      <img class="team-bg-content-img" src="../assets/img/teamMark.png" alt="">
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content-banner-text bg-purple-light">
                    <div class="team-bg-content-text-box">
                      <h1> aaaa </h1>
                      <h3>aaa </h3>
                      <br>
                      <span style="color: white">战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--  战队主力成员  -->
    <div>
      <h2 class="title">战队主力成员</h2>
      <br>
      <hr>
      <br>
      <!--   队员展示表格   -->
      <el-table
        :data="tableData"
        stripe
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 92%; margin: 0 auto;">
        <el-table-column
          prop="memberIcon"
          label="队员头像"
          width="180"
          class="member-table-col-small">
        </el-table-column>
        <el-table-column
          prop="memberId"
          label="队员id"
          width="180"
          class="member-table-col-small">
        </el-table-column>
        <el-table-column
          prop="memberName"
          label="姓名"
          width="180"
          class="member-table-col-small">
        </el-table-column>
        <el-table-column
          prop="memberInfo"
          label="生涯">
        </el-table-column>
        <el-table-column
          prop="memberSupport"
          label="获赞数"
          width="180"
          class="member-table-col-small">
        </el-table-column>
        <el-table-column label="查看信息" class=asd>
          <template slot-scope="scope">
            <el-button
              round
              type="primary"
              size="mini"
              icon="el-icon-s-operation"
              @click="handleEdit(scope.$index, scope.row)">队员详细信息
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="更改队员信息" v-if="flag">
          <template slot-scope="scope">
            <el-button
              @click="func1(scope.$index, scope.row)"
              round
              size="mini"
              icon="el-icon-edit"
              type="success"
              style="margin-left: 16px;">
              更改信息
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除队员" v-if="flag">
          <template slot-scope="scope">
            <el-button
              @click="func2(scope.$index, scope.row)"
              round
              size="mini"
              icon="el-icon-delete"
              type="danger"
              style="margin-left: 16px;">
              删除队员
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="点赞">
          <template slot-scope="scope">
            <el-button
              @click="good(scope.$index, scope.row)"
              round
              size="mini"
              icon="el-icon-star-off"
              type="info "
              style="margin-left: 16px;">
              点赞
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   添加队伍   -->
      <div id="team-add" v-if="flag">
        <el-button
          round
          @click="func3()"
          icon="el-icon-plus"
          type="warning">
          增加队员
        </el-button>
      </div>
    </div>
    <!--  drawer  -->
    <div>
      <!--   drawer1 更改队员信息   -->
      <el-drawer
        title=""
        :visible.sync="drawer1"
        :with-header="true">
        <div>
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="memberIcon">
              <el-input v-model="formLabelAlign.memberIcon"></el-input>
            </el-form-item>
            <el-form-item label="memberId">
              <el-input v-model.number="formLabelAlign.memberId"></el-input>
            </el-form-item>
            <el-form-item label="memberName">
              <el-input v-model="formLabelAlign.memberName"></el-input>
            </el-form-item>
            <el-form-item label="memberInfo">
              <el-input v-model="formLabelAlign.memberInfo"></el-input>
            </el-form-item>
            <el-form-item label="memberSupport">
              <el-input v-model.number="formLabelAlign.memberSupport"></el-input>
            </el-form-item>
            <el-form-item label="memberTeam">
              <el-input v-model.number="formLabelAlign.memberTeam"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <button @click="handleUpdate()">确认修改</button>
      </el-drawer>
      <!--   drawer2 删除队员   -->
      <el-drawer
        title=""
        :visible.sync="drawer2"
        :with-header="true">
        <div>
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="memberIcon">
              <el-input v-model="formLabelAlign.memberIcon"></el-input>
            </el-form-item>
            <el-form-item label="memberId">
              <el-input v-model.number="formLabelAlign.memberId"></el-input>
            </el-form-item>
            <el-form-item label="memberName">
              <el-input v-model="formLabelAlign.memberName"></el-input>
            </el-form-item>
            <el-form-item label="memberInfo">
              <el-input v-model="formLabelAlign.memberInfo"></el-input>
            </el-form-item>
            <el-form-item label="memberSupport">
              <el-input v-model.number="formLabelAlign.memberSupport"></el-input>
            </el-form-item>
            <el-form-item label="memberTeam">
              <el-input v-model.number="formLabelAlign.memberTeam"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <button @click="handleDel()">确认删除</button>
      </el-drawer>
      <!--  drawer3 添加队员 -->
      <el-drawer
        title="删除队员"
        :visible.sync="drawer3"
        :with-header="true">
        <div>
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="memberIcon">
              <el-input v-model="formLabelAlign.memberIcon"></el-input>
            </el-form-item>
            <el-form-item label="memberId">
              <el-input v-model.number="formLabelAlign.memberId"></el-input>
            </el-form-item>
            <el-form-item label="memberName">
              <el-input v-model="formLabelAlign.memberName"></el-input>
            </el-form-item>
            <el-form-item label="memberInfo">
              <el-input v-model="formLabelAlign.memberInfo"></el-input>
            </el-form-item>
            <el-form-item label="memberSupport">
              <el-input v-model.number="formLabelAlign.memberSupport"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <button @click="handleAdd()">确认添加</button>
      </el-drawer>
      <!--   drawer4 添加记录   -->
      <el-drawer
        title="添加对局记录"
        :visible.sync="drawer4"
        :with-header="true">
        <div>
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlignRecord">
            <el-form-item label="recordWin">
              <el-input v-model="formLabelAlignRecord.recordWin"></el-input>
            </el-form-item>
            <el-form-item label="recordFail">
              <el-input v-model="formLabelAlignRecord.recordFail"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <button @click="handleAddRecord()">确认添加</button>
      </el-drawer>
      <!--   drawer5 更改对局记录信息   -->
      <el-drawer
        title="修改对局记录"
        :visible.sync="drawer5"
        :with-header="true">
        <div>
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlignRecord">
            <el-form-item label="recordId">
              <el-input v-model.number="formLabelAlignRecord.recordId"></el-input>
            </el-form-item>
            <el-form-item label="recordVideoid">
              <el-input v-model="formLabelAlignRecord.recordVideoid"></el-input>
            </el-form-item>
            <el-form-item label="recordWin">
              <el-input v-model.number="formLabelAlignRecord.recordWin"></el-input>
            </el-form-item>
            <el-form-item label="recordFail">
              <el-input v-model.number="formLabelAlignRecord.recordFail"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <button @click="RecordUpdateConfirm()">确认修改</button>
      </el-drawer>
    </div>
    <!--  对局信息浏览  -->
    <div>
      <h2 class="title">对局信息浏览</h2>
      <br>
      <hr>
      <br>
      <div id="GameRecord-box">
        <el-table
          :data="listId"
          stripe
          style="width: 100%">
          <el-table-column
            prop="recordId"
            label="recordId"
            width="180">
          </el-table-column>
          <el-table-column
            prop="recordVideoid"
            label="recordVideoid"
            width="180">
          </el-table-column>
          <el-table-column
            prop="recordFail"
            label="recordFail"
            width="180">
          </el-table-column>
          <el-table-column
            prop="recordWin"
            label="recordWin"
            width="180">
          </el-table-column>
          <el-table-column label="查看比赛详情">
            <template slot-scope="scope">
              <el-button
                round
                type="primary"
                size="mini"
                icon="el-icon-s-operation"
                @click="handleRecorddetail(scope.$index, scope.row)">比赛记录详细信息
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="更改对局信息" v-if="flag">
            <template slot-scope="scope">
              <el-button
                @click="handleRecordUpdate(scope.$index, scope.row)"
                round
                size="mini"
                icon="el-icon-edit"
                type="success"
                style="margin-left: 16px;">
                更改对局信息
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="删除对局信息" v-if="flag">
            <template slot-scope="scope">
              <el-button
                @click="handleRecordDel(scope.$index, scope.row)"
                round
                size="mini"
                icon="el-icon-delete"
                type="danger"
                style="margin-left: 16px;">
                删除对局信息
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div id="record-add" v-if="flag">
        <el-button
          round
          @click="func4()"
          icon="el-icon-plus"
          type="warning">
          添加对局记录
        </el-button>
      </div>
    </div>
    <!--  评论  -->
    <div id="review-bigbox">
      <h2 class="title">评论区</h2>
      <br>
      <hr>
      <br>
      <div id="textarea-box" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="textarea"
          size="medium">
        </el-input>
        <div id="textarea-box-btn">
          <el-button @click="Comment()" slot="reference">点击发送评论</el-button>
        </div>
      </div>
      <br>
      <!--   评论展示   -->
      <div style="border: 1px solid rgb(192,196,204);box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);" id="review-box">
        <div v-for="item in review">
          <div id="smal-box">
            <el-divider content-position="left">评论来自：{{ item.reviewOwner }} —— to：{{ item.reviewParent }}</el-divider>
            <span>{{ item.reviewInfo }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {request} from "../network/request";
import axios from "axios"
import Vue from "vue"

export default {
  name: "team",
  data() {
    return {
      flag: true,
      textarea: '哈哈哈哈哈哈哈哈哈哈哈哈哈',
      teamId: 100,
      dataListTeam: '',
      dataListMember: '',
      review: [],
      disabled: '',
      labelPosition: 'right',
      formLabelAlign: {
        memberId: 0,
        memberName: "",
        memberInfo: "",
        memberSupport: 0,
        memberTeam: 0,
        memberIcon: "",
      },
      formLabelAlignRecord: {
        recordId: 0,
        recordVideoid: 0,
        recordWin: 0,
        recordFail: 0
      },
      drawer1: false,
      drawer2: false,
      drawer3: false,
      drawer4: false,
      drawer5: false,
      tableData: [],
      listId: [],
      teamWinData: {},
      teamFailData: {},
      tableDataRecordList: [],
      recordListId: 0

    }
  },
  computed: {
    TeamName() {
      return parseInt(this.$route.params.teamname)
    },
  },
  methods: {
    // 评论
    Comment() {
      const list = {
        reviewId: this.review.length,
        reviewUser: this.$store.state.userName,
        reviewInfo: this.textarea,
      }
      Vue.set(this.review, this.review.length, list)
      // 网络请求 传递评论到数据库
      const number = parseInt(this.$store.state.userId)
      const json = {
        reviewId: 1,
        reviewOwner: number,
        reviewInfo: this.textarea,
        reviewParent: this.TeamName
      }
      axios.post('http://localhost:8081/teams/reviewteam/save', json)
        .then(res => {
          location.reload()
        })
        .catch(Error => {

        })
    },
    // 判断权限
    JudgePower() {
      if (this.$store.state.userPower == 0) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    //更新队员信息按钮
    func1(index, row) {
      this.drawer1 = true
      this.formLabelAlign.memberIcon = row.memberIcon
      this.formLabelAlign.memberId = row.memberId
      this.formLabelAlign.memberName = row.memberName
      this.formLabelAlign.memberInfo = row.memberInfo
      this.formLabelAlign.memberSupport = row.memberSupport
      this.formLabelAlign.memberTeam = row.memberTeam
    },
    //删除队员按钮
    func2(index, row) {
      this.formLabelAlign.memberId = row.memberId
      this.handleDel()
    },
    // 添加队员按钮
    func3() {
      this.drawer3 = true
      this.formLabelAlign.memberTeam = this.$route.params.teamname
    },
    // 添加record按钮
    func4(index, row) {
      this.drawer4 = true
      this.formLabelAlignRecord.recordId = 1
    },
    // 查看详情
    handleEdit(index, row) {
      this.$router.push('/teammember/' + row.memberId);
    },
    // 确认修改队员信息
    handleUpdate() {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/umember/update', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 确认删除队员
    handleDel() {
      const arr = [
        this.formLabelAlign.memberId
      ]
      axios.post('http://localhost:8081/teams/umember/delete', arr)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 确认添加队员
    handleAdd() {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/umember/save', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 确认添加对局记录
    handleAddRecord() {
      this.formLabelAlignRecord.recordVideoid = this.recordListId
      const json = this.formLabelAlignRecord
      axios.post('http://localhost:8081/teams/record/save', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    //
    funcc(item) {
      this.$router.push('/gamerecorddetail/' + item.recordId);
    },
    // 查看对局信息button
    handleRecorddetail(index, row) {
      this.$router.push('/gamerecorddetail/' + row.recordId);
    },
    // 修改对局信息button
    handleRecordUpdate(index, row) {
      this.drawer5 = true
      this.formLabelAlignRecord.recordId = row.recordId
      this.formLabelAlignRecord.recordVideoid = row.recordVideoid
      this.formLabelAlignRecord.recordWin = row.recordWin
      this.formLabelAlignRecord.recordFail = row.recordFail
    },
    // 删除对局信息button
    handleRecordDel(index, row) {
      this.formLabelAlignRecord.recordId = row.recordId
      this.RecordDelConfirm()
    },
    // 确认修改对局信息
    RecordUpdateConfirm() {
      const json = this.formLabelAlignRecord
      axios.post('http://localhost:8081/teams/record/update', json)
        .then(res => {
          location.reload()
        })
        .catch(Error => {

        })
    },
    // 确认删除对局信息
    RecordDelConfirm() {
      const arr = [
        this.formLabelAlignRecord.recordId
      ]
      axios.post('http://localhost:8081/teams/record/delete', arr)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    //  点赞
    good(index, row) {
      request({
        url: "/umember/good/" + row.memberId,
      }).then(res => {
        location.reload()
      }).catch(err => {
        console.log(err)
      })
    }
  },
  created() {
    this.JudgePower()

    request({
      url: '/team/info/' + this.TeamName,
    }).then(res => {
      this.dataListTeam = res
    }).catch(err => {
      console.log(err)
    })
    // 队伍评论
    request({
      url: "reviewteam/list",
    }).then(res => {
      this.review = res.page.list

      console.log(this.review);
    }).catch(err => {
      console.log(err)
    })

    request({
      url: "/umember/listByTeamId/" + this.TeamName,
    }).then(res => {
      this.tableData = res.list
    }).catch(err => {
      console.log(err)
    })

    this.JudgePower()
    // 对局记录浏览
    request({
      url: '/record/list',
    }).then(res => {
      this.recordListId = res.page.list[res.page.list.length - 1].recordId + 1
      for (let i = 0; i < res.page.list.length; i++) {
        if (res.page.list[i].recordWin == this.TeamName || res.page.list[i].recordFail == this.TeamName) {
          this.listId.push(res.page.list[i])
        }
      }
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.grid-content-banner {
  border-radius: 4px;
  height: 521px;
}

.grid-content-banner-img {
  width: 100%;
  height: 521px;
  margin: 0 auto;
}

.team-bg-content-img-box {
  width: 70%;
  height: 70%;
  padding: 12%;
  margin: 0 auto;
}

.team-bg-content-img {
  width: 100%;
  height: 100%;
}

.grid-content-banner-text {
}

.bg-img {
  background-image: url("../assets/img/team_banner-bg.jpg");
}

.team-bg-content {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  color: white;
}


.team-bg-content-text-box {
  width: 80%;
  height: 70%;
  margin: 22% auto;
}

.bg-purple {
  background-color: #d3dce6;
}

.bg-purple-light {
  //border: 1px solid #d3dce6;
}

.bg-purple-dark {
  background: #99a9bf;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.grid-content-member-img-box {
  height: 300px;
  background-color: rgb(211, 220, 230);
}

.member-img-box {
  height: 100%;
}

.member-img {
  width: 100%;
}

#textarea-box {
  width: 80%;
  margin: 0 auto;
}

#textarea-box-btn {
  float: right;
  margin-top: 1%;
}

span {
  color: black;
}

#review-box {
  width: 80%;
  margin: 0 auto;
  margin-top: 3%;
}

.add-team {
  width: 30%;
  margin: 0 auto;
}

.title {
  margin-top: 3%;
  margin-left: 2%;
}

#curd-box {
  margin-left: 3.5%;
}

#review-bigbox {
  margin-bottom: 5%;
}

#smal-box {
  width: 90%;
  margin: 3% auto;
}

#team-add {
  float: right;
  margin-top: 1%;
  margin-right: 4%;
}

#record-add {
  float: right;
  margin-top: 1%;
  margin-right: 4%;
}

#GameRecord-box {
  width: 92%;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.asd {
  display: none !important;
}

.el-input {
  width: 60%;
  margin-left: 20%;
}
</style>
